<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="">小伙伴您好！下面是您的借阅信息：</span>
          </div>
        </el-card>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="图书证号">
          <template slot-scope="scope">
            <span>{{ scope.row.cardId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="借阅流水号">
          <template slot-scope="scope">
            <span>{{ scope.row.lendId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书编码">
          <template slot-scope="scope">
            <span>{{ scope.row.bookId }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图书类别">
          <template slot-scope="scope">
            <span>{{ scope.row.className }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="借阅日期">
          <template slot-scope="scope">
            <span>{{ scope.row.lendDate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="到期日期">
          <template slot-scope="scope">
            <span>{{ scope.row.backDate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="借阅状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.lendState | toState(scope.row.lendState)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="超期天数">
          <template slot-scope="scope">
            <span>{{ scope.row.overduedate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="滞纳金">
          <template slot-scope="scope">
            <span>{{ scope.row.overduefee }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.operation')"
          align="center"
          min-width="150px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <i
              v-hasPermission="['lLendList:list']"
              class="el-icon-view table-operation"
              style="color: #87d068"
              @click="continueLend(row)"
              >续借</i
            >
            <i
              v-hasPermission="['lLendList:add']"
              class="el-icon-setting table-operation"
              style="color: #2db7f5"
              @click="breakLend(row)"
              >还书</i
            >
            <i
              v-show="row.lendState == '2'"
              v-hasPermission="['lLendList:add']"
              class="el-icon-setting table-operation"
              style="color: #2db7f5"
              @click="aliPay(row)"
              >支付测试</i
            >
            <el-link
              v-has-no-permission="['lLendList:list', 'lLendList:add']"
              class="no-perm"
            >
              {{ $t("tips.noPermission") }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="aliPay" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
export default {
  name: 'BookReturn',
  components: { Pagination },
  filters: {
    toState(value) {
      if (value === '0') {
        return '未归还'
      } else if (value === '2') {
        return '超期'
      }
    }
  },
  data() {
    return {
      userId: '',
      list: null,
      listLoading: false
    };
  },
  computed: {
    currentUser() {
      return this.$store.state.account.user;
    }
  },
  created() { },
  activated() { },
  mounted() {
    this.userId = this.$store.state.account.user.userId
    this.getList(this.userId)
  },
  destroyed() { },
  methods: {
    continueLend(row) {
      var updateObj = {
        lendId: row.lendId,
        lendState: '1'
      }
      this.$put('study/lLendList', { ...updateObj }).then(res => {
        this.$message({
          message: this.$t('tips.updateSuccess'),
          type: 'success'
        })
        this.getList(this.userId);
      })
    },
    aliPay(row) {
      var payObj = {
        outTradeNo: row.lendId,
        totalAmount: row.overduefee
      }
      this.$get('study/aliPay/pcPay', { ...payObj }).then(resp => {
        // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
        const divForm = document.getElementsByTagName('aliPay')
        if (divForm.length) {
          document.body.removeChild(divForm[0])
        }
        const div = document.createElement('aliPay')
        div.innerHTML = resp.data.resultBody // data就是接口返回的form 表单字符串
        document.body.appendChild(div)
        document.forms[0].setAttribute('target', '_parent') // 新开窗口跳转
        document.forms[0].submit();
      })
    },
    breakLend(row) {
      var updateObj = {
        lendId: row.lendId,
        lendState: '1'
      }
      this.$put('study/lLendList', { ...updateObj }).then(res => {
        this.$message({
          message: this.$t('tips.updateSuccess'),
          type: 'success'
        })
        this.getList(this.userId);
      })
    },
    getList(userId) {
      this.listLoading = true;
      var queryObj = {
        username: userId
      }
      this.$get('study/lLendList/getLendMsgByUser', { ...queryObj }).then(res => {
        console.log(res)
        this.list = res.data.resultBody
        console.log(this.list)
        this.listLoading = false;
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
